<template>
  <div class="w-[100%] h-[100%]">
    <div class="">
      <ContentWrap :show-border="false">
        <SearchBox
          :queryForm="searchList"
          :showExpland="false"
          :show-export="false"
          @query="handleSearchQuery"
        />
      </ContentWrap>
    </div>
    <div class="mt-[30px]">
      <el-button type="primary" color="#3721FF" @click="handleBtnClick({ type: 'add' })">
        <Icon icon="ep:plus" class="mr-5px" />
        新增
      </el-button>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
      >
        <template #createTime="{ row }">
          {{ row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
        </template>
      </QueryTable>
    </div>

    <!-- <ComfirmPops
      ref="ConfirmPropsRef"
      :type="'radio'"
      @confirm="getConfirmValue"
      title="新增"
      :show-icon="false"
      width="537"
    >
      <template #content>
        <InfoAction ref="InfoActionRef" :info="selectedRow" />
      </template>
    </ComfirmPops> -->
    <InfoAction v-model="isShowDialog" :info="selectRows" @confirm="handleBtnClick" />
  </div>
</template>
<script setup lang="ts">
import QueryTable from '@/components/TableData/index.vue'

import { throttle, confirmPromote } from '@/utils'
import InfoAction from './components/InfoAction.vue'
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import { FbpxApi, type FbpxVO } from '@/api/ad/fbpx'
import dayjs from 'dayjs'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const ConfirmPropsRef = ref(null)
const InfoActionRef = ref(null)

const initQueryParams = {
  pageNo: 1,
  pageSize: 10
}
const searchList: TradeOrderQueryVO[] = [
  {
    label: '像素ID',
    code: 'pixelId',
    type: 'input'
  }
]

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
])

const th = ref([
  {
    name: '像素ID',
    code: 'pixelId'
  },
  {
    name: 'access_token',
    code: 'accessToken'
  },
  {
    name: '业务员',
    code: 'createName'
  },
  {
    name: '创建时间',
    code: 'createTime'
  },
  {
    name: '备注',
    code: 'remark'
  }
])

const dataList = ref<FbpxVO[]>([])

const ids = ref<Array<string | number>>([])
const total = ref(0)

const initRow = {}
const selectRows = ref({ ...initRow })
const isShowDialog = ref(false)

const queryParams = ref({
  ...initQueryParams
})

const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  getList()
}

const handleBtnClick = (e) => {
  console.log(e, 'handleBtnClick')
  let type = e.type
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  fbpxConfirm: throttle(async ({ data }) => {
    if (data.id) {
      await FbpxApi.updateFbpx(data)
    } else {
      await FbpxApi.createFbpx(data)
    }
    message.success('操作成功')
    getList()
  }, 1000),
  add() {
    selectRows.value = {
      ...initRow
    }
    isShowDialog.value = true
  },
  edit({ data: { row } }) {
    selectRows.value = row
    isShowDialog.value = true
  },
  del() {
    if (ids.value.length == 0) {
      message.error('请选择要删除的数据')
      return
    }
    ids.value.map((item) => {
      handleDelete(item.id)
    })
  },
  delItem({ data: { row } }) {
    handleDelete(row.id)
  }
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await FbpxApi.deleteFbpx(id)
    message.success(t('删除成功'))
    // 刷新列表
    queryParams.value.pageNo = 1
    await getList()
  } catch {}
}
const getList = async () => {
  let res = await FbpxApi.getFbpxPage(queryParams.value)
  total.value = res.total
  dataList.value = res.list || []
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
:deep(.el-button) {
  height: 45px !important;
  border-radius: 23px !important;
  padding: 0 22px !important;
}
</style>
